<template>


  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="550px"
    @closed="closed"
    >


  <div class="form-drawer__content" style="height: 100%;padding: 10px;">

    <div style="height: 75px;">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="queryForm.keywords" placeholder="场景名称" style="width: 18.75rem;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
          <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%;margin-top: -12px;">

      <el-table-column
        prop="name"
        label="场景名称"
        >
      </el-table-column>

      <el-table-column prop="status" label="封面" width="220px" align="left">
         <template slot-scope="scope">
           <el-image
               style="width: 180px; height: 90px"
               fit="fit"
               :src="scope.row.url"
               >
           </el-image>
         </template>
       </el-table-column>
      <el-table-column label="操作" align="left" >
       <template slot-scope="scope">
         <el-button type="text" size="small" @click="handlePublish(scope.row)">创建应用
         </el-button>
       </template>
      </el-table-column>

    </el-table>

    <div style="text-align: right;padding-top: 0.3125rem;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.cur"
        :page-size="page.limit"
        :total="page.total"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, total, sizes">
      </el-pagination>
    </div>

  </div>


  <!--编辑框-->
  <info-drawer
    v-if="editDrawer.visible"
    :properties="editDrawer"
    @closed="closed"
  />


  </div>
  </el-drawer>
</template>




<script>

  import InfoDrawer from './InfoDrawer.vue'


  import {
    saveScene,
    getSceneTypes,
    findScenePerms,
    findMySceneList
  } from '@/api/biz/scene'

  import {
    saveProject,
  } from '@/api/biz/project'


  import {
    findUserList,
    saveUser,
    deleteUser
  } from '@/api/system/user'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'SceneTemplateDrawer',
    components: {
      InfoDrawer
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'我的场景',
        loading:false,
        baseUrl:process.env.VUE_APP_BASE_API,
        tableData: [],
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        editDrawer: {
          visible: false,
          type: '0',
          data: {},
          modal:false
        },
      }
    },
    created() {
      this.load()
    },
    methods:{
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.load()
      },
      load(){
        this.loading=true
        findMySceneList({
          cur: this.page.cur,
          limit: this.page.limit,
          keywords: this.queryForm.keywords,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result.list
            this.page.total = rsp.result.totalRow
            _data.forEach(item => {
              item['url']=this.baseUrl+'/biz/scene/thumbnail/'+item.id
            })
            this.tableData = _data
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleSizeChange(val) {
        this.page.limit = val
        this.load()
      },
      handleCurrentChange(val) {
        this.page.cur = cur
        this.load()
      },
      handlePublish: function(data) {
        this.editDrawer.visible = true
        this.editDrawer.type = '0'
         this.editDrawer.data={
           name:data.name,
           sceneId:data.id
         }
        console.log("fsdfsd");
      },
      //handlePublish(data){
        // this.loading = true
        // saveProject({
        //   name:data.name,
        //   sceneId:data.id,
        // }).then(rsp => {
        //   if(200==rsp.code){
        //     this.$message({
        //       type: 'success',
        //       message:rsp.message
        //     })
        //   }
        //   this.closed()
        // }).catch(err => {
        //   console.log(err);
        // })
        // .finally(() => {
        //   this.loading = false
        // })

      //},
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style scoped>

  .division{
    padding: 10px;
    border-top: 1px solid #aaaaaa;
    margin-top: -36px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }


  /deep/ .el-table{
   height:  calc(100% - 105px)  !important;
  }
  /deep/.el-table__body-wrapper {
      overflow: hidden;
      overflow-y: auto;
      position: relative;
      height: calc(100% - 55px);
  }
</style>
